<template>
  <div class="container">
    <el-form :model="searchList" ref="searchList">
      <el-row :gutter="20">
        <el-col :span="8" :offset="0">
          <el-form-item label>
            <el-input v-model="searchList.name" placeholder="委办局名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label>
            <el-input v-model="searchList.project_name" placeholder="项目名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <div class="right">
            <el-button type="primary" size="medium" @click="search" :loading="loading">查询</el-button>
            <el-button type="primary" size="medium" @click="handleExpand" :loading="loading">
              <i :class="isExpand?'el-icon-remove-outline':'el-icon-circle-plus-outline'"></i>
              {{isExpand?'关闭全部行':'展开全部行'}}
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      ref="table"
      border
      stripe
      :height="offsetHeight"
      v-loading="loading"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="tableName" label="名称" min-width="300" tree></el-table-column>
      <el-table-column prop="project_name" label="项目类型" width="80" align="center">
        <template slot-scope="{row}" v-if="row.copy_status">
          <el-tag type="success" size="medium" v-if="row.copy_status ==='0'">无变化</el-tag>
          <el-tag type="warning" size="medium" v-else-if="row.copy_status ==='1'">有变化</el-tag>
          <el-tag type="primary" size="medium" v-else>新增</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="money" label="申请金额" width="100" align="center"></el-table-column>
      <el-table-column label="审核金额" width="100" align="center">
        <template slot-scope="{row}">
          <template v-if="row.third_money_sign">
            <span>{{row.third_money?row.third_money:''}}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" fixed="right" align="center">
        <template slot-scope="{row}">
          <el-button-group>
            <template v-if="row.grade==='2'">
              <el-button type="primary" size="mini" @click="projectInfo(row.id)">项目信息</el-button>
              <el-button
                type="info"
                size="mini"
                @click="flow(row)"
              >{{row.status | f_submitTtypeRename}}</el-button>
              <el-button type="green" size="mini" @click="advice(row)">审核意见</el-button>
            </template>
            <template v-else-if="row.grade==='3'">
              <el-button type="primary" size="mini" @click="contractInfo(row.id)">合同信息</el-button>
              <el-button type="warning" size="mini" @click="adviceInfo(row.id)">具体审核信息</el-button>
            </template>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!-- 项目信息 -->
    <el-drawer
      title="项目信息"
      :visible.sync="projectShow"
      size="70%"
      center
      :destroy-on-close="true"
      :wrapperClosable="false"
    >
      <project-item :project-params="projectParams" @cancel="cancel" @init="init"></project-item>
    </el-drawer>
    <!-- 合同信息 -->
    <el-drawer
      title="合同信息"
      :visible.sync="contractShow"
      size="70%"
      center
      :destroy-on-close="true"
      :wrapperClosable="false"
    >
      <contract-item :contract-params="contractParams" @cancel="cancel" @init="init"></contract-item>
    </el-drawer>
    <!-- 流程图 -->
    <el-dialog
      title="流程信息"
      :visible.sync="flowShow"
      width="70%"
      @close="flowShow = false"
      top="20px"
    >
      <flow-Item :flow-params="flowParams" ref="flowItems"></flow-Item>
      <span slot="footer">
        <el-button type="primary" @click="flowShow = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 项目审核信息 -->
    <el-drawer
      title="项目审核信息"
      :visible.sync="verifyShow"
      size="70%"
      center
      :destroy-on-close="true"
      :wrapperClosable="false"
    >
      <div class="container">
        <verify :verify-params="verifyParams" @cancel="cancel" @init="init"></verify>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import ProjectItem from '@/components/Project'
import ContractItem from '@/components/Contract'
import FlowItem from '@/components/FlowChart'
import Verify from '../../components/verify1'
import { f_submitTtypeRename } from '@/utils/filters.js'
export default {
  name: 'NotFinish',
  components: {
    ProjectItem, ContractItem, FlowItem, Verify
  },
  props: {
    switch: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    status: {
      type: String,
      default: () => {
        return ''
      }
    },
  },
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 280,
      searchList: {},
      loading: false,
      tableData: [],
      projectShow: false,
      projectParams: {},
      contractShow: false,
      contractParams: {},
      buildType: [
        { value: '1', label: '政府投资' },
        { value: '2', label: '政府购买服务' },
        { value: '3', label: '企业投资（资产归企业所有）' },
        { value: '4', label: '企业投资（资产归政府所有）' }
      ],
      flowShow: false,
      flowParams: {},
      verifyShow: false,
      verifyParams: {},
      isExpand: false,
    }
  },
  created () {

  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      const res = await this.$http('verifyQuit', {
        status: this.status,
        ...this.searchList
      })
      let res1 = res
      res1 = res1.filter(item => {
        return item.children.length > 0
      })
      res1.forEach(item1 => {
        item1.grade = '1'
        item1.tableName = item1.name
        item1.money = 0
        item1.third_money = 0

        item1.children.forEach(item2 => {
          item2.grade = '2'
          item2.tableName = item2.project_name
          item2.money = 0
          item2.third_money = 0

          item2.children.forEach(item3 => {
            item3.grade = '3'
            item3.tableName = item3.contract_name
            if (item3.service_pre_amount_sum) {
              item3.money = parseFloat(item3.service_pre_amount_sum).toFixed(4)
              item2.money = (parseFloat(item2.money) + parseFloat(item3.money)).toFixed(4)
              item1.money = (parseFloat(item1.money) + parseFloat(item3.money)).toFixed(4)
            }
            if (typeof item3.third_check_amount_sum === 'number') {
              item3.third_money = parseFloat(item3.third_check_amount_sum).toFixed(4)
              item2.third_money = (parseFloat(item2.third_money) + parseFloat(item3.third_check_amount_sum)).toFixed(4)
              item1.third_money = (parseFloat(item1.third_money) + parseFloat(item3.third_check_amount_sum)).toFixed(4)
              item1.third_money_sign = item2.third_money_sign = item3.third_money_sign = '1'
            }
          })
        })
      })
      this.tableData = res1
      this.loading = false
    },
    search () {
      this.isExpand = true
      this.init()
      this.handleExpand()
    },
    cancel () {
      this.projectShow = false
      this.projectParams = {}
      this.contractShow = false
      this.contractParams = {}
      this.verifyShow = false
      this.verifyParams = {}
    },
    projectInfo (pid) {
      this.projectShow = true
      this.projectParams = {
        pid: pid,
      }
    },
    contractInfo (id) {
      this.contractShow = true
      this.contractParams = {
        cid: id,
      }
    },
    adviceInfo (id) {
      sessionStorage.setItem("verifyInfo",
        JSON.stringify({
          contract_id: id,
        })
      );
      this.$emit('toIt', this.switch);
    },
    flow (item) {
      this.flowShow = true
      this.flowParams = {
        pid: item.id,
        status: item.status,
        apply_batch: item.apply_batch,
        inside_log: item.internal_code_log
      }
      setTimeout(() => {
        setTimeout(() => {
          console.log('执行1');
          this.$refs.flowItems.init()

        }, 100)
        console.log('执行2');
        this.$refs.flowItems.close()

      }, 100)
    },
    advice (item) {
      this.verifyParams = {
        id: item.id,
        status: item.status,
        apply_batch: item.apply_batch,
        company_code: item.company_code
      }
      this.verifyShow = true
    },
    // 是否展开table(展开与折叠切换)
    handleExpand () {
      this.isExpand = !this.isExpand
      this.$nextTick(() => {
        this.forArr(this.tableData, this.isExpand)
      })
    },
    // 遍历
    forArr (arr, isExpand) {
      arr.forEach(i => {
        // toggleRowExpansion(i, isExpand)用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        this.$refs.table.toggleRowExpansion(i, isExpand)
        if (i.children) {
          this.forArr(i.children, isExpand)
        }
      })
    },
  },
  computed: {

  },
  filters: {
    f_submitTtypeRename: f_submitTtypeRename
  }
}
</script>
<style scoped>
</style>
